#{extends 'main.html' /}
#{set title: 'Import de cours' /}
#{set 'moreStyles'}
	 #{stylesheet 'caroussel.css' /}
	 #{stylesheet 'dropfile.css' /}
	 #{stylesheet 'note.css' /}
#{/set}
#{set 'moreScripts'}
#{/set}
<script>
$(function(){
    var socket = new WebSocket('@@{MyWebSocket.asyncMessage()}');
    var j = 1;
    socket.onmessage = function(event) {
        display(event.data);
    }    
	$('.carousel').carousel({
	    interval: false
	    });
	
    var display = function(event) {
		var parent = $("#"+j);
			
		
		if(event != ""){
				var inner = $(parent).find('.accordion-inner')[0];
				$(inner).addClass('error-file');
				$(inner).append(event);
				$('a[href=#'+j+'] div').css('text-decoration','line-through');
				$('#open'+j).append('<i class="icon-chevron-right"></i>')
		}else{
			$('#statut'+j).append('OK');
		}
		j++;
		$(parent).prev(".accordion-heading").css('background-color','#FFF');
		$("#"+j).prev(".accordion-heading").css('background-color','#F4F4F4');
//		$("#"+j).toggle('hover');
    	    }
    $('#accordion2').on('show', function () {
        var open = $('.in').prev(".accordion-heading");
        alert(open.class);
        $($(open).find('i')[0]).removeClass('icon-chevron-right');
        $($(open).find('i')[0]).addClass('icon-chevron-down');
        });
	
});
</script>
<section>
	<div id="container_data">
	    <div id="myCarousel" class="carousel slide">
<!-- 		    <ol class="carousel-indicators"> -->
<!-- 			    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> -->
<!-- 			    <li data-target="#myCarousel" data-slide-to="1"></li> -->
<!-- 			    <li data-target="#myCarousel" data-slide-to="2"></li> -->
<!-- 		    </ol> -->
	    <!-- Carousel items -->
		    <div class="carousel-inner">
			    <div class="active item">
			    	<br><br><br><br><br><br><br><br><br><br>
			    	<div class="offset1">
			    		<div class="offset1"><img id="fleche2" src="@{'/public/images/fleches/fleche2.png'}"></div>
			    		<div class="offset1">
			    				<p class="info-bulle">T&eacute;l&eacute;charger le fichier <br> d'import en cliquant ici</p>			    				
			    		</div>
			    		
			    		<br><br><br>
				    	<div class="offset4">
				    		<a href="@{Interventions.getGabaritExcel()}">
				    			<button class="btn btn-large" type="button">T&eacute;l&eacute;charger</button>
				    		</a>
				    	</div>
				    	<br><br><br>
				    	<div class="offset6">
			    				<p class="info-bulle">Contient la liste actuelle <br>des formations de l'IUT</p>
			    		</div>
			    	</div>			    	
			    </div>
			    <div class="item">
			    	<div class="offset1">
			    			<img id="fleche1" src="@{'/public/images/fleches/fleche1.png'}">
			    			<div class="offset2">
			    				<p style="position: absolute;" class="info-bulle">Remplir le fichier d'import en respectant<br>ces consignes</p>
			    			</div>
			    			<div id="note"> 
							  <ul>
							    <li>
							      <a href="#">
							        <h2>#1 : La mati&egrave;re</h2>
							        <p>Le champs doit &ecirc;tre compos&eacute; de 80 caract&egrave;res <u>max</u>.</p>
							      </a>
							    </li>
							    <li>
							      <a href="#">
							        <h2>#2 : Les dates (fin et d&eacute;but)</h2>
							        <p><b>IMPORTANT</b> - Respecter le format jj/mm/yyyy </p>
							      </a>
							    </li>
							    <li>
							      <a href="#">
							        <h2>#3 : La description</h2>
							        <p>Attention : ne doit pas d&eacute;passer 250 caract&egrave;res !</p>
							      </a>
							    </li>
							    <li>
							      <a href="#">
							        <h2>#4 : Dur&eacute;e</h2>
							        <p>En heure => format num&eacute;rique uniquement</p>
							      </a>
							    </li>
							    <li>
							      <a href="#">
							        <h2>#5 : Formation concern&eacute;e ?</h2>
							        <p>Choisir dans la liste d&eacute;roulante parmi les formations propos&eacute;es</p>
							      </a>
							    </li>
							  </ul>
							  </div>
							  <div class="row">
<!-- 							  	<p class="info-bulle"><span class="icon-draw">!</span>Une erreur d&eacute;tect&eacute;e entrainera le rejet total du fichier</p> -->
									<div class="row">
										<div class="offset2">
											<div class="span"><img src="@{'/public/images/exclam.png'}"></div>
											<div class="span6">
												<p class="info-bulle">Si une erreur est pr&eacute;sente, le fichier sera totalement rejett&eacute;</p>
											</div>
								  		</div>
							  		</div>
							  </div>
					</div>
			    </div>
<div class="item" style="top: 50px;">
			    <img class="offset3" src="/public/images/fleches/fleche3.png" style="float: left;">
<p class="info-bulle offset7" style="">L'analyse du fichier c'est par ici !</p>

<p style="left: 15px; position: absolute; transform: rotate(-10deg); top: 60px;" class="info-bulle">Glisser<br>le fichier ...</p>
<img style="position: absolute; left: 30px; top: 100px;" src="/public/images/fleches/fleche4.png">
				    <div class="offset1" style="top: 50px; position: absolute;">
				    	
				    	<div class="span5">

							<form id="upload" enctype="multipart/form-data" accept-charset="utf-8" method="post" action="/interventions/getdatafromexcel"><input type="hidden" value="6041013f1a9d930c497c7860318b6940e55e92a9" name="authenticityToken">

								<div id="drop">
									<span style="font-family:'MV Boli'; color:#F4F4F4;">Drop Here</span>
					
									<a>Browse</a>
									<input type="file" name="uploadFile">
								</div>
					
								<ul>
									<!-- The file uploads will be shown here -->
								</ul>
							
</form>
<p style="transform: rotate(-15deg); text-align: right; padding-top: 20px;" class="info-bulle">... Ou cliquer</p>
						</div>
						
						
						<div class="span4">
				    		<div class="accordion" id="accordion2"></div>
			

				    	</div>
				    </div>
<!-- 				    <div class="offset1" style="top: 50px; position: absolute;"> -->
<!-- 				    	<p class="info-bulle" style="transform:rotate(-10deg);-ms-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);">Glisser<br>le fichier ...</p> -->
<!-- 				    	<div class="span4"> -->
<!-- 							<form action="/interventions/getdatafromexcel" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="upload" ><input type="hidden" name="authenticityToken" value="6041013f1a9d930c497c7860318b6940e55e92a9">
 -->
<!-- 								<div id="drop"> -->
<!-- 									<span style="font-family:'MV Boli'; color:#F4F4F4;">Drop Here</span> -->
					
<!-- 									<a>Browse</a> -->
<!-- 									<input type="file" name="uploadFile"/> -->
<!-- 								</div> -->
					
<!-- 								<ul> -->
<!-- 									The file uploads will be shown here -->
<!-- 								</ul> -->
<!-- 							
</form> -->
<!-- 						</div> -->
<!-- 						<p class="info-bulle" style="transform:rotate(-15deg);-ms-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);">... Ou cliquer</p> -->
<!-- 						<p class="info-bulle">L'analyse du fichier c'est par ici !</p> -->
<!-- 						<div class="span4 offset1"> -->
<!-- 				    		<div class="accordion" id="accordion2"></div> -->
<!-- <!-- 							<table style="display:none;" id="report" class="table table-striped"> --> 
<!-- <!-- 								<thead> --> 
<!-- <!-- 									<tr> -->
<!-- <!-- 										<th>#</th> --> 
<!-- <!-- 										<th>Ligne</th> --> 
<!-- <!-- 										<th>Statut</th> --> 
<!-- <!-- 									</tr> --> 
<!-- <!-- 								</thead> -->
<!-- <!-- 								<tbody> --> 
<!-- <!-- 								</tbody> --> 
<!-- <!--    							</table> --> 
					

<!-- 				    	</div> -->
<!-- 				    </div> -->
			    </div>
		    </div>
		    <!-- Carousel nav -->
		    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>
	</div>
</section>

		<script src="@{'/public/javascripts/jquery.knob.js'}"></script>

		<!-- jQuery File Upload Dependencies -->
		<script src="@{'/public/javascripts/jquery.ui.widget.js'}"></script>
		<script src="@{'/public/javascripts/jquery.iframe-transport.js'}"></script>
		<script src="@{'/public/javascripts/jquery.fileupload.js'}"></script>
		
		<!-- Our main JS file -->
		<script src="@{'/public/javascripts/import_excel.js'}"></script>